<template>
  <div>

    <el-empty v-if="!tableData || !tableData.length" description="暂无数据" />
    <div v-else>
      <el-table :data="tableData" border stripe style="width: 100%" :pagination="true">
        <el-table-column prop="adminName" :label="'操作用户'" width="150" align="center" />
        <el-table-column prop="ipAddr" :label="'IP地址'" width="150" align="center" />
        <el-table-column prop="timestamp" :label="'操作时间'" width="200" align="center">
          <template #default="scope">
            {{ dayjs(scope.row.timestamp * 1000).format("YYYY-MM-DD HH:mm") }}
          </template>
        </el-table-column>
        <el-table-column prop="content" :label="'操作内容'" align="center" />
      </el-table>
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100, 500]" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getOperationLogListApi } from "@/require/api.js";
import { dayjs } from "element-plus";

onMounted(() => {
  // 获取操作日志
  getOperationLogList();
});

const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 获取提币列表
async function getOperationLogList() {
  try {
    let res = await getOperationLogListApi();
    if (res.code === 200) {
      tableData.value = res.data.list;
      total.value = res.data.total;
    }
  } catch (error) {
    console.log('getOperationLogListApi - error', error);
  }
};

// 切换分页器每页数据的条数
function handleSizeChange(e) {
  pageSize.value = e;
  // 获取操作日志
  getOperationLogList();
};

// 切换分页
function handleCurrentChange(e) {
  currentPage.value = e;
  // 获取操作日志
  getOperationLogList();
};

</script>

<style lang="less" scoped>
.query-form {
  text-align: left;
}
</style>